<template>
  <canvas
    ref="canvasRef"
    class="fixed inset-0 w-full h-full pointer-events-none z-0"
    :class="{ 'opacity-50': !isActive }"
  ></canvas>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useThemeStore } from '@/stores/theme'

const props = defineProps({
  isActive: {
    type: Boolean,
    default: true
  }
})

const themeStore = useThemeStore()
const canvasRef = ref(null)
let animationId = null
let particles = []
let ctx = null

// 粒子类
class Particle {
  constructor(x, y, color) {
    this.x = x
    this.y = y
    this.vx = (Math.random() - 0.5) * 0.5
    this.vy = (Math.random() - 0.5) * 0.5
    this.size = Math.random() * 3 + 1
    this.color = color
    this.alpha = Math.random() * 0.5 + 0.3
    this.life = Math.random() * 100 + 50
    this.maxLife = this.life
  }

  update() {
    this.x += this.vx
    this.y += this.vy
    this.life--
    
    // 边界检测
    if (this.x < 0 || this.x > window.innerWidth) this.vx *= -1
    if (this.y < 0 || this.y > window.innerHeight) this.vy *= -1
    
    // 重新生成粒子
    if (this.life <= 0) {
      this.x = Math.random() * window.innerWidth
      this.y = Math.random() * window.innerHeight
      this.life = this.maxLife
    }
  }

  draw() {
    ctx.save()
    ctx.globalAlpha = this.alpha * (this.life / this.maxLife)
    ctx.fillStyle = this.color
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
    ctx.fill()
    ctx.restore()
  }
}

// 初始化画布
const initCanvas = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  ctx = canvas.getContext('2d')
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  // 创建粒子
  particles = []
  const particleCount = Math.min(window.innerWidth * window.innerHeight / 20000, 100)
  
  const colors = themeStore.isDark 
    ? ['#ff6b9d', '#6c5ce7', '#00cec9', '#a29bfe']
    : ['#ff6b9d', '#6c5ce7', '#00cec9', '#fd79a8']

  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle(
      Math.random() * canvas.width,
      Math.random() * canvas.height,
      colors[Math.floor(Math.random() * colors.length)]
    ))
  }
}

// 动画循环
const animate = () => {
  if (!ctx || !props.isActive) return

  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)

  // 更新和绘制粒子
  particles.forEach(particle => {
    particle.update()
    particle.draw()
  })

  // 绘制连接线
  drawConnections()

  animationId = requestAnimationFrame(animate)
}

// 绘制粒子连接线
const drawConnections = () => {
  const maxDistance = 150
  
  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      const dx = particles[i].x - particles[j].x
      const dy = particles[i].y - particles[j].y
      const distance = Math.sqrt(dx * dx + dy * dy)

      if (distance < maxDistance) {
        ctx.save()
        ctx.globalAlpha = (1 - distance / maxDistance) * 0.3
        ctx.strokeStyle = themeStore.isDark ? '#ffffff' : '#000000'
        ctx.lineWidth = 1
        ctx.beginPath()
        ctx.moveTo(particles[i].x, particles[i].y)
        ctx.lineTo(particles[j].x, particles[j].y)
        ctx.stroke()
        ctx.restore()
      }
    }
  }
}

// 窗口大小改变处理
const handleResize = () => {
  if (canvasRef.value) {
    canvasRef.value.width = window.innerWidth
    canvasRef.value.height = window.innerHeight
    initCanvas()
  }
}

// 监听主题变化
watch(() => themeStore.isDark, () => {
  if (particles.length > 0) {
    const colors = themeStore.isDark 
      ? ['#ff6b9d', '#6c5ce7', '#00cec9', '#a29bfe']
      : ['#ff6b9d', '#6c5ce7', '#00cec9', '#fd79a8']
    
    particles.forEach(particle => {
      particle.color = colors[Math.floor(Math.random() * colors.length)]
    })
  }
})

onMounted(() => {
  initCanvas()
  animate()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', handleResize)
})
</script> 